<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>交互式智能作曲系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="../../static/first_page/css/style.css"/>
</head>
<body>
<div class="total">
    <div class="container">
        <div class="header" style="z-index: 1;">
            <div class="header-img1">
                <img src="../../static/first_page/img/menu.png" class="img1"/>
            </div>
            <div class="header-one">
                <div class="header-logo1">
                    <img src="../../static/first_page/img/mlogo.png" class="logo1"/>
                </div>
                <div class="header-headlabel">
                    <label class="headlabel">交互式智能作曲系统</label>
                </div>
            </div>
            <div class="header-two">
                <div class="header-label1">
                    <label class="label1">开始作曲</label>
                </div>
                <div class="header-img2">
                    <img class="img2" src="../../static/first_page/img/denglu.jpg"/>
                </div>
            </div>
        </div>
        <div class="mybody">
            <div class="content-one">
                <div class="one-one">
                    <div class="content-one-img2">
                    </div>
                    <div class="one-one-left-img">
                        <img src="../../static/first_page/img/mlogo2.png" class="logo2"/>
                    </div>
                    <div class="one-one-right-label">
                        <label class="label3">智能作曲&nbsp;·&nbsp;一键润色</label>
                    </div>
                </div>
                <div class="one-two">
                    <div class="one-two-back">
                        <img src="../../static/first_page/img/vector1.png" class="vector1" alt="#"/>
                    </div>
                    <div class="one-two-others">
                        <div class="one-two-left">
                            <img src="../../static/first_page/img/laptop.png" class="img3" alt="#"/>
                        </div>
                        <div class="one-two-right">
                            <div class="one-two-text1" align="center">
                                <label class="label4">现在开始</label>
                            </div>
                            <div class="one-two-text2" align="center">
                                <label class="label5">尝试全新的创作方式</label>
                            </div>
                            <div class="one-two-text3" align="center">
                                <label class="label6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开始作曲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div class="content-two">
                <div class="two-left">
                    <div class="two-left-img">
                        <img src="../../static/first_page/img/picture1.png" alt="picture1" class="img45" />
                    </div>
                </div>
                <div class="two-right">
                    <div class="two-right-box">
                        <div class="two-right-up">
                            <div class="two-right-one">
                                <div class="two-right-one-up">
                                    <div class="two-right-one-up-img">
                                        <img src="../../static/first_page/img/dy.png" class="img6" alt="#"/>
                                    </div>
                                    <div class="two-right-one-up-a1">
                                        <label class="label7">AI 主旋律续写</label>
                                    </div>
                                </div>
                                <div class="two-right-one-a2">
                                    <label class="label8">AI 作曲模型可自动根据已有片段，生成长度可控的旋律</label>
                                </div>
                            </div>
                            <div class="two-right-two">
                                <div class="two-right-two-up">
                                    <div class="two-right-two-up-img">
                                        <img src="../../static/first_page/img/dy.png" class="img7" alt="#"/>
                                    </div>
                                    <div class="two-right-two-up-a1">
                                        <label class="label9">AI 旋律修改</label>
                                    </div>
                                </div>
                                <div class="two-right-two-a2">
                                    <label class="label10">AI 生成模型对固定的音乐片段进行重新续写</label>
                                </div>
                            </div>
                            <div class="two-right-three">
                                <div class="two-right-three-up">
                                    <div class="two-right-three-up-img">
                                        <img src="../../static/first_page/img/dy.png" class="img10" alt="#"/>
                                    </div>
                                    <div class="two-right-three-up-a1">
                                        <label class="label11">AI 乐理润色</label>
                                    </div>
                                </div>
                                <div class="two-right-three-a2">
                                    <label class="label12">乐理润色算法可对固定音乐片段进行乐理润色</label>
                                </div>
                            </div>
                        </div>
                        <div class="two-right-down">
                            <div class="two-right-down-one">
                                <img class="rectangle1" src="../../static/first_page/img/tri.png"  alt="#"/>
                            </div>
                            <div class="two-right-down-two">
                                <img class="rectangle2" src="../../static/first_page/img/tri.png"  alt="#"/>
                            </div>
                            <div class="two-right-down-three">
                                <img class="rectangle3" src="../../static/first_page/img/tri.png"  alt="#"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 120px;"></div>
            <div class="two-three-vector2">
                <img src="../../static/first_page/img/vector2.png" class="vector2" alt="#"/>
            </div>
            <div class="content-three">
                <div class="three-one" align="center">
                    <label class="label13">随时随地&nbsp;·&nbsp;方便快捷</label>
                </div>
                <div class="three-two">
                    <img src="../../static/first_page/img/laptop.png" class="three-two-img1"  alt="#"/>
                    <div class="three-two-one">
                        <img src="../../static/first_page/img/line.png" class="line1" alt="#"/>
                    </div>
                    <div class="three-two-two">
                        <img src="../../static/first_page/img/line2.png" class="line2" alt="#"/>
                    </div>
                    <div class="three-two-three">
                        <img src="../../static/first_page/img/line3.png" class="line3" alt="#"/>
                    </div>
                    <div class="three-two-four">
                        <label class="label14">MIDI输入</label>
                    </div>
                    <div class="three-two-five">
                        <label class="label15">AI续写</label>
                    </div>
                    <div class="three-two-six">
                        <label class="label16">智能润色</label>
                    </div>
                </div>
                <div class="three-three"></div>
            </div>
            <div class="content-three-four-mid"></div>
            <div class="content-four">
                <div class="four-img">
                    <img src="../../static/first_page/../../static/first_page/img/tri2.png" class="four-img1" alt="#"/>
                </div>
            </div>
            <div class="content-five">
                <div class="five-one" align="center">
                    <label class="teamjj">团队介绍</label>
                </div>
                <div class="five-two">
                    <div class="five-two-left">
                        <div class="rectangle4" align="center"></div>
                    </div>
                    <div class="five-two-right">
                        <div class="five-two-right-one">
                            <label class="nextlab">NextLab</label>
                        </div>
                        <div class="five-two-right-two" align="center">
                            <div class="five-two-right-two-rec">
                                <label class="nextlabjj">NEXT Lab MUSIC-AI（智能音乐组）致力于利用智能技术实现音乐领域相关应用，构建一个包含音乐导向、音乐分析和音乐生成的多维技术生态，以逐步解决智能化的音乐赋能与生产问题，希望打造视听智能交互生态，打通视听融合运行机制，拓展跨媒体泛娱乐新形势</label>
                            </div>
                        </div>
                        <div class="five-two-right-three">
                            <img src="../../static/first_page/../../static/first_page/img/earth.png" class="img11" alt="#"/>
                            <a href="http://www.next.zju.edu.cn" class="label17">http://www.next.zju.edu.cn</a>
                        </div>
                    </div>
                </div>
                <div class="five-three">
                    <div class="five-three-box" align="center">
                        <div class="five-three-first">
                            <div class="five-three-a">
                                <img src="../../static/first_page/../../static/first_page/img/ellipse15.png" class="imga"/>
                                <br /><br />
                                <label class="memberajj">成员A简介</label>
                            </div>
                            <div class="five-three-b">
                                <img src="../../static/first_page/../../static/first_page/img/ellipse15.png" class="imgb"/>
                                <br /><br />
                                <label class="memberbjj">成员B简介</label>
                            </div>
                            <div class="five-three-c">
                                <img src="../../static/first_page/../../static/first_page/img/ellipse15.png" class="imgc"/>
                                <br /><br />
                                <label class="membercjj">成员C简介</label>
                            </div>
                        </div>
                        <div class="five-three-second">
                            <div class="five-three-d">
                                <img src="../../static/first_page/../../static/first_page/img/ellipse15.png" class="imgd"/>
                                <br /><br />
                                <label class="memberdjj">成员D简介</label>
                            </div>
                            <div class="five-three-e">
                                <img src="../../static/first_page/../../static/first_page/img/ellipse15.png" class="imge"/>
                                <br /><br />
                                <label class="memberejj">成员E简介</label>
                            </div>
                            <div class="five-three-f">
                                <img src="../../static/first_page/../../static/first_page/img/ellipse15.png" class="imgf"/>
                                <br /><br />
                                <label class="memberfjj">成员F简介</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-zero"></div>
            <div class="footer-one">
                <div class="footer-one-left">
                    <div class="footer-one-left-one">
                        <div class="footer-one-left-one-one">
                            <img src="../../static/first_page/../../static/first_page/img/mlogo.png" class="footer-one-left-one-img"/>
                        </div>
                        <div class="footer-one-left-one-two">
                            <label class="label18">交互式智能作曲系统</label>
                        </div>
                    </div>
                    <div class="footer-one-left-two">
                        <div class="footer-one-left-two-one">
                            <img src="../../static/first_page/../../static/first_page/img/close.png" class="img14"/>
                        </div>
                        <div class="footer-one-left-two-two">
                            <img src="../../static/first_page/../../static/first_page/img/next.png" class="img15"/>
                        </div>
                    </div>
                </div>
                <div class="footer-one-right">
                    <div class="footer-one-right-one">
                        <label class="label19">联系我们&nbsp;&nbsp;Contact us&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxxx@zju.edu.cn</label>
                    </div>
                </div>
            </div>
            <div class="footer-zero-two"></div>
            <div class="footer-two">
                <div class="footer-two-line" align="center">
                    <img src="../../static/first_page/../../static/first_page/img/line4.png" class="img16"/>
                </div>
            </div>
            <div class="footer-three">
                <div class="footer-three-left">
                    <div class="footer-three-one">
                        <label class="label22">登录</label>
                        <label class="label23">&nbsp;Log in</label>
                    </div>
                    <div class="footer-three-two">
                        <label class="label24">注册</label>
                        <label class="label25">&nbsp;Sign up</label>
                    </div>
                    <div class="footer-three-three">
                        <label class="label26">帮助</label>
                        <label class="label27">&nbsp;Support</label>
                    </div>
                </div>
                <div class="footer-three-right">
                    <div class="footer-three-four">
                        <label class="label28">教程</label>
                        <label class="label29">&nbsp;Tutorials</label>
                    </div>
                    <div class="footer-three-five">
                        <label class="label30">语言</label>
                        <label class="label31">&nbsp;Language</label>
                    </div>
                </div>
            </div>
            <div class="footer-four">
                <div class="footer-four-a" align="center">
                    <label class="label32">NEXTLab © 2021   •   浙江大学科技设计创新创业实验室</label>
                </div>
            </div>
            <div class="footer-five">
                <div class="footer-five-empty"></div>
                <div class="footer-five-box">
                    <div class="footer-five-img-one">
                        <img src="../../static/first_page/img/wechat-fill.png" class="img12"/>
                    </div>
                    <div class="footer-five-img-two">
                        <img src="../../static/first_page/img/dy2.png" class="img13"/>
                    </div>
                </div>
            </div>
            <div class="footer-six">
                <div class="footer-six-box" align="center">
                    <label class="label33">(0086) 0571-87953695   |   zhangkejun@zju.edu.cn</label>
                </div>
            </div>
            <div class="footer-seven-empty"></div>
        </div>
    </div>
</div>
</body>
</html>
